<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
                <el-input clearable v-model="form.mode" style="width: 300px" placeholder="动员方式"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query()">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="open">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tableData" border>
            <el-table-column prop="objective" align="center" label="实际目的"></el-table-column>
            <el-table-column prop="mode" align="center" label="动员方式"></el-table-column>

            <el-table-column prop="state" align="center" label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == '0'">已开始</span>
                    <span v-else>已结束</span>
                </template>
            </el-table-column>

            <el-table-column prop="create_time" align="center" label="创建时间"></el-table-column>
            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="scope">
                    <el-button
                            v-show="scope.row.state==='0'"
                            type="danger"
                            size="mini"
                            @click="jieshu(scope.row)">
                        停止
                    </el-button>
                    <el-button v-show="scope.row.state!=='0'" type="primary" size="mini" @click="detail(scope.row)">回应详情</el-button>
                    <el-button type="success" size="mini" @click="openAdd(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalRecord" class="text-center mt10">
        </el-pagination>
        <el-dialog title="社区动员" :visible.sync="dialogFormVisible" @close='closeDialog' width="650px">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="新社区动员" name="first">
                    <el-form :rules="rules" :model="addform" ref="addform" class="ml100">
                        <el-form-item label="实际目的" prop="objective">
                            <el-input v-model="addform.objective" class="w400"></el-input>
                        </el-form-item>
                        <el-form-item label="动员方式" prop="mode">
                            <el-input v-model="addform.mode" class="w400"></el-input>
                        </el-form-item>
                        <el-form-item label="社区需求" prop="demand">
                            <el-input v-model="addform.demand" type="textarea" :rows="5"
                                      style='width:330px;'></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="width: 160px; margin-left: 445px">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="save('addform')">确 定</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="资源" name="second">
                    <el-form class="ml100">
                        <el-form-item label="资源列表：">
                            <el-select v-model="addform.resources" placeholder="请选择资源" class="w400">
                                <el-option
                                        v-for="item in typeList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                            <el-button style="margin-left: 10px" size="mini" type="primary"
                                       @click="createZy(addform.resources)">添加
                            </el-button>
                        </el-form-item>

                        <el-form-item label="资源：">
                            <el-tag
                                    v-for="tag in dynamicTags"
                                    :key="tag.id"
                                    closable
                                    :disable-transitions="false"
                                    @close="closetag(tag)">
                                {{tag.company_name}}
                            </el-tag>
                        </el-form-item>
                        <div style="width: 160px; margin-left: 405px">
                            <el-button type="primary" @click="dialogFormVisible = false">关 闭</el-button>

                        </div>
                    </el-form>
                </el-tab-pane>
            </el-tabs>

        </el-dialog>

        <!-- 修改弹出 -->
        <el-dialog title="社区动员" :visible.sync="dialogFormVisible1" @close='closeDialog' width="650px">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="社区动员" name="first">
                    <el-form :rules="rules" :model="addform" ref="addform" class="ml100">
                        <el-form-item label="实际目的" prop="objective">
                            <el-input v-model="addform.objective" class="w400"></el-input>
                        </el-form-item>
                        <el-form-item label="动员方式" prop="mode">
                            <el-input v-model="addform.mode" class="w400"></el-input>
                        </el-form-item>
                        <el-form-item label="社区需求" prop="demand">
                            <el-input v-model="addform.demand" type="textarea" :rows="5"
                                      style='width:330px;'></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="width: 160px; margin-left: 445px">
                        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="save('addform')">确 定</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="资源" name="second">
                    <el-form class="ml100">
                        <el-form-item label="资源列表：">
                            <el-select v-model="addform.resources" placeholder="请选择资源" class="w400">
                                <el-option
                                        v-for="item in typeList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                            <el-button style="margin-left: 10px" size="mini" type="primary"
                                       @click="upZy(addform.resources)">添加
                            </el-button>
                        </el-form-item>

                        <el-form-item label="资源：">
                            <el-tag
                                    v-for="tag in dynamicTags"
                                    :key="tag.id"
                                    closable
                                    :disable-transitions="false"
                                    @close="closetag1(tag)">
                                {{tag.company_name}}
                            </el-tag>
                        </el-form-item>
                        <div style="width: 160px; margin-left: 405px">
                            <el-button type="primary" @click="dialogFormVisible1 = false">关 闭</el-button>

                        </div>
                    </el-form>
                </el-tab-pane>
            </el-tabs>

        </el-dialog>

        <!-- 回应详情弹出框 -->
        <el-dialog :visible.sync="detailVisible" width="650px">

            <el-table :data="detailData" border>
                <el-table-column prop="strategy" align="center" label="回应策略"></el-table-column>
                <el-table-column prop="practice" align="center" label="回应做法"></el-table-column>
                <el-table-column prop="department" align="center" label="对接部门"></el-table-column>
                <el-table-column label="操作" align="center" width="100px">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="content(scope.row)">详情</el-button>
                </template>
            </el-table-column>
            </el-table>
            <div slot="footer" >
                <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
            </div>
        </el-dialog>
        <!-- 回应详情弹出框 -->
        <el-dialog :visible.sync="contentVisible" width="600px">
           <el-form :model="contentForm"  label-width="180px" >
                <el-form-item label="回应策略" >
                    <div style="width: 320px">
                        <el-input v-model="contentForm.strategy"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="回应做法" >
                    <div style="width: 320px">
                        <el-input v-model="contentForm.practice"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="对接部门">
                    <div style="width: 320px">
                        <el-input v-model="contentForm.department"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="使用资源">
                    <div style="width: 320px">
                        <el-input v-model="contentForm.resources"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="投入费用">
                    <div style="width: 320px">
                        <el-input v-model="contentForm.cost"></el-input>
                    </div>
                </el-form-item>
                 <el-form-item label="所花时间">
                    <div style="width: 320px">
                        <el-input v-model="contentForm.time"></el-input>
                    </div>
                </el-form-item>
            </el-form>

            <div slot="footer" >
                <el-button type="primary" @click="contentVisible = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                detailVisible:false,
                detailData:[],//回应详情
                contentVisible:false,
                contentForm:{},
                activeName: 'first',
                dynamicTags: [],
                createId: '',//创建的动员id
                form: {
                    mode: ''
                },
                addform: {
                    objective: '',
                    mode: '',
                    demand: ''
                },
                rules: {
                    objective: [{required: true, message: '请输入实际目的', trigger: 'blur'}],
                    mode: [{required: true, message: '请输入动员方式', trigger: 'blur'}],
                    demand: [{required: true, message: '请输入社区需求', trigger: 'blur'}]
                },
                tableData: [],
                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
                dialogFormVisible: false,
                dialogFormVisible1: false,
                loading: false,
                typeList: [],
                upId: '',
            }
        },


        methods: {
            //初始化
            async init() {
                this.loading = true;
                const res = await this.$http('communityMobilizationList', this.form);
                console.log(res)
                this.tableData = res.results;
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
                this.typeList = await this.$http('resourcesList');
                this.loading = false;
            },
            //添加资源
            async createZy(zy) {
                const res = await this.$http('createrespond', {
                    mobilization_id: this.createId,
                    company_id: zy
                });
                console.log(this.createid)
                console.log(zy)
                const Res = await this.$http('nolist', {
                    mobilization_id: this.createId,
                });
                this.dynamicTags = Res
            },
            //修改资源
            async upZy(zy) {
                const res = await this.$http('createrespond', {
                    mobilization_id: this.upId,
                    company_id: zy
                });
                const Res = await this.$http('nolist', {
                    mobilization_id: this.upId,
                });
                this.dynamicTags = Res
            },

            //回应详情
            async detail(parme){
                this.detailVisible = true

                let res = await this.$http('hylist', {
                    mobilization_id: parme.id,
                    state : '1'

                });
                this.detailData = res.results
                console.log('hylist',this.detailData)
            },
            //详情内容
            async content(row){
                this.contentVisible = true
                console.log('rrr',row)
                this.contentForm = row
            },
            //删除资源
            async closetag(tag) {
                console.log('tag', tag)
                let res = await this.$http('deleterespond', {
                    id: tag.id
                });
                this.dynamicTags = await this.$http('nolist', {
                    mobilization_id: this.createid,
                });
            },
            //删除修改的资源
            async closetag1(tag) {
                console.log('tag', tag)
                let res = await this.$http('deleterespond', {
                    id: tag.id
                });
                this.dynamicTags = await this.$http('nolist', {
                    mobilization_id: this.upId,
                });
            },

            async jieshu(row) {
                console.log('row', row)
                const res = await this.$http('createCommunityMobilization', {
                    id: row.id,
                    state: '1',
                });
                this.init();
            },

            //分页
            async handleSizeChange(val) {
                this.form.pageSize = val;
                this.init();
            },
            async handleCurrentChange(val) {
                this.form.pageNo = val;
                this.init();
            },
            //查询
            async query() {
                this.form.pageNo = 1;
                this.init();
            },
            //弹出模态框
            async open(row) {
                console.log('roero', row)
                this.activeName = 'first'
                this.dialogFormVisible = true;
                if (row.id !== undefined) {
                    this.addform = Object.assign({}, row);
                }
                console.log('this.addform', this.addform)
                this.dynamicTags = await this.$http('nolist', {
                    mobilization_id: row.id,
                });
                console.log('this.dynamicTags', this.dynamicTags)
            },

            //弹出模态框
            async openAdd(row) {
                console.log('roero', row)
                this.upId = row.id
                this.activeName = 'first'
                this.dialogFormVisible1 = true;
                if (row.id !== undefined) {
                    this.addform = Object.assign({}, row);
                }
                this.dynamicTags = await this.$http('nolist', {
                    mobilization_id: row.id,
                });
            },
            //保存
            async save(formName) {
                console.log('addform', formName)
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        const res = await this.$http('createCommunityMobilization', this.addform);
                        console.log('createid', res)
                        if (res.count === 1) {
                            this.$message({message: '保存成功', type: 'success'});
                            this.createId = res.uuid
                            this.init();
                            this.activeName = 'second'
                        } else {
                            this.$message.error('保存失败');
                        }
                    }
                });
            },
            //删除
            async del(id) {
                this.$confirm('确认是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http('createCommunityMobilization', {'id': id, 'del_flag': '1'});
                    if (res.count === 1) {
                        this.$message({type: 'success', message: '删除成功'});
                        this.init();
                    } else {
                        this.$message.error('删除失败');
                    }
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            },
            //请空数据
            async closeDialog() {
                this.addform = {
                    objective: '',
                    mode: '',
                    demand: ''
                };
            },
        },

        watch: {},

        mounted() {
            this.init();
        },

    }
</script>


<style scoped>
    .w400 {
        width: 330px
    }
</style>
